<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <title>H+ 后台主题UI框架 - 注册</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name">Li</h1>
        </div>
        <h3>欢迎注册 Light</h3>
        <p>创建一个Light新账户</p>
        <form class="m-t" role="form" action="" method="post">
            <div class="form-group">
                <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号" onblur="checkPhone()"
                       required=""/>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="pass" name="pass" placeholder="请输入密码" required=""/>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="repass" placeholder="请再次输入密码" required=""/>
            </div>
            <div class="form-group text-left">
                <div class="checkbox i-checks">
                    <label class="no-padding">
                        <input type="checkbox"/><i></i> 我同意注册协议</label>
                </div>
            </div>

            <input type="button"  id="registerButton" value="注 册" onclick="checkPass()"
                   class="btn btn-primary block full-width m-b"/>

            <p class="text-muted text-center">
                <small>已经有账户了？</small>
                <a href="/">点此登录</a>
            </p>

        </form>
    </div>
</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- iCheck -->
<script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        function checkPhone() {
            var val = $("#phone").val();
            if (!val.toString()[0] === '1' || val.length !== 11) {
                layer.msg("手机号错误");
                return false;
            }
        }
    });



    function checkPass() {
        var pass = $("#pass").val();
        var repass = $("#repass").val();
        if (repass !== pass) {
            layer.msg("两次密码输入不一致");
            return false;
        }
        doRegister();
    }

    function doRegister() {
        var phone = $("#phone").val();
        var pass = $("#pass").val();
        $.ajax({
            url: "/user/register",
            type: "POST",
            data: {
                userPhone: phone,
                userPass: pass
            },
            success: function (data) {
                if (data.code == 200) {
                    window.location.href = "/";
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    }
</script>

<!--<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>-->
<!--&lt;!&ndash;统计代码，可删除&ndash;&gt;-->

</body>

</html>
